@import utils.bacteriaData
@(row: bacteriaData)(implicit session: Session)
@teacher.main("详细信息") {

    <link rel="stylesheet" media="screen" href="@routes.Assets.at("fancybox/jquery.fancybox.css")">
    <script src="@routes.Assets.at("fancybox/jquery.fancybox.js")" type="text/javascript"></script>

    <style>
            th {
                width: 20%;
            }

            table{
                table-layout: fixed;
                word-wrap: break-word;
            }

            .seq {
                height: 150px;
                overflow: auto;
                padding-right: 25px;
                font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
            }

    </style>

    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <b style="font-size: 20px;">详细信息</b>
            </li>
        </ul>
    </div>


    <div class="row-fluid">

        <div class="row">

            <div class="col-md-12 col-sm-12">
                <div class="portlet blue-soft box">

                    <div class="portlet-title">
                        <div class="caption">
                            菌种详细信息
                        </div>
                    </div>

                    <div class="portlet-body">

                        <table class="table table-bordered table-hover">
                            <tbody>
                                <tr>

                                    <th>菌株名称首字母</th>
                                    <td>@row.initials</td>

                                    <th>甘油管保藏位置</th>
                                    <td>@row.glycerinPosition</td>
                                </tr>

                                <tr>
                                    <th>安瓿管保藏位置</th>
                                    <td>@row.ampoulePosition</td>

                                    <th>保藏形式</th>
                                    <td>@row.preservedForm</td>
                                </tr>

                                <tr>
                                    <th>实验室原始编号（或命名）</th>
                                    <td>@row.labNumber</td>

                                    <th>菌株名称（中文）</th>
                                    <td>@row.bacteriaNameCh</td>
                                </tr>

                                <tr>
                                    <th>菌株名称（英文）</th>
                                    <td>@row.bacteriaNameEn</td>

                                    <th>抗性及浓度</th>
                                    <td>@row.resAndCon</td>
                                </tr>

                                <tr>
                                    <th>培养基</th>
                                    <td>@row.cultureMedium</td>

                                    <th>培养条件（耗/厌氧，培养温度，转速）</th>
                                    <td>@row.cultureCondition</td>
                                </tr>

                                <tr>
                                    <th>来源</th>
                                    <td>@row.source</td>

                                    <th>应用</th>
                                    <td>@row.apply</td>
                                </tr>

                                <tr>
                                    <th>引用文献</th>
                                    <td>@row.worksCited</td>

                                    <th>保藏人</th>
                                    <td>@row.preservedPeople</td>
                                </tr>

                                <tr>
                                    <th>指导老师</th>
                                    <td>@row.teacher</td>

                                    <th>保藏日期</th>
                                    <td>@row.preservedDate</td>
                                </tr>

                                <tr>
                                    <th>是否保密</th>
                                    <td>@row.isSercet</td>

                                    <th>引物序列</th>
                                    <td>@row.primerSeq</td>
                                </tr>

                                <tr>
                                    <th>16S 序列</th>
                                    <td colspan="3">
                                        <div class="seq">
                                        @row.seq16s
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>18S 序列</th>
                                    <td colspan="3">
                                        <div class="seq">
                                        @row.seq18s
                                        </div>

                                    </td>
                                </tr>

                                <tr>
                                    <th>序列索引号</th>
                                    <td colspan="3">@row.seqIndex</td>
                                </tr>

                                <tr>
                                    <th>菌种形态图</th>
                                    <td colspan="3">
                                        <table id="bTable" >
                                        </table>
                                    </td>
                                </tr>

                                <tr>
                                    <th>电镜照片</th>
                                    <td colspan="3">
                                        <table id="eTable">
                                        </table>
                                    </td>
                                </tr>

                                <tr>
                                    <th>安瓿管数量</th>
                                    <td>@row.ampouleNums</td>

                                    <th>甘油管备注</th>
                                    <td>@row.glycerinNotes</td>
                                </tr>

                                <tr><th colspan="4" style="color: red;border-left: 1px solid transparent;
                                    border-right: 1px solid transparent;">备注</th></tr>

                                <tr>
                                    <th>是否基因改造</th>
                                    <td>@row.isGmo</td>

                                    <th>内包含质粒名称</th>
                                    <td>@row.goverName</td>
                                </tr>

                                <tr>
                                    <th>酶切位点/应用</th>
                                    <td>@row.ggcc</td>

                                    <th>引物</th>
                                    <td>@row.primer</td>
                                </tr>

                                <tr>
                                    <th>长度</th>
                                    <td>@row.length</td>

                                    <th>改造序列</th>
                                    <td>
                                        <div class="seq">
                                        @row.tranSeq
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>敲除基因名称</th>
                                    <td>@row.outName</td>

                                    <th>敲除后片段序列</th>
                                    <td>
                                        <div class="seq">
                                        @row.outSeq
                                        </div>
                                    </td>
                                </tr>


                            </tbody>

                        </table>


                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>

        $(function () {

            $.ajax({
                url: "/bacteria/sample/getBacteriaImage?id=" + @row.number +"&types=bacteria",
                type: "post",
                success: function (data) {

                    $("#bTable").bootstrapTable({
                        data: data,
                        showHeader:false,
                        formatNoMatches: function () {
                            return "暂无照片！";
                        },
                        formatLoadingMessage: function () {
                            return "请稍等，正在加载中。。。";
                        },
                        columns: [{
                            field: "q0",
                            formatter: function (value) {
                                return getImage(value, 1);
                            }
                        }, {
                            field: "q1",
                            formatter: function (value) {
                                return getImage(value, 1);
                            }
                        }, {
                            field: "q2",
                            formatter: function (value) {
                                return getImage(value, 1);
                            }
                        }, {
                            field: "q3",
                            formatter: function (value) {
                                return getImage(value, 1);
                            }
                        }, {
                            field: "q4",
                            formatter: function (value) {
                                return getImage(value, 1);
                            }
                        }
                        ]
                    })
                }

            });

            $.ajax({
                url: "/bacteria/sample/getBacteriaImage?id=" + @row.number +"&types=ele",
                type: "post",
                success: function (data) {

                    $("#eTable").bootstrapTable({
                        data: data,
                        showHeader:false,
                        formatNoMatches: function () {
                            return "暂无照片！";
                        },
                        formatLoadingMessage: function () {
                            return "请稍等，正在加载中。。。";
                        },
                        columns: [{
                            field: "q0",
                            formatter: function (value) {
                                return getImage(value, 2);
                            }
                        }, {
                            field: "q1",
                            formatter: function (value) {
                                return getImage(value, 2);
                            }
                        }, {
                            field: "q2",
                            formatter: function (value) {
                                return getImage(value, 2);
                            }
                        }, {
                            field: "q3",
                            formatter: function (value) {
                                return getImage(value, 2);
                            }
                        }, {
                            field: "q4",
                            formatter: function (value) {
                                return getImage(value, 2);
                            }
                        }
                        ]
                    })

                }

            });


        })

        function getImage(value, group) {
            var de;
            if (typeof(value) == "undefined") {
                de = "";
            } else {
                var max = value.split("_min")[0] + value.split("_min")[1];
                var name;
                if(group == 1){
                    name = "bacteria"
                }else{
                    name = "ele"
                }

                de = "<a data-fancybox='group" + group + "' href='/bacteria/utils/getImageByPhotoId?id=" + @row.number +"&name=/"+name+"/" + max + "'>\n" +
                        "<img src='/bacteria/utils/getImageByPhotoId?id=" + @row.number +"&name=/"+ name+"/" + value + "' width='100%' height='156px'>\n" +
                        "</a>";
            }

            return de;
        }


    </script>


}